<template>
	<view class="container">
		<view class="status_bar_h" :style="{
				height: `${statusBarHeight}px`,
				backgroundColor: '#20BF6C',
			}"></view>
		<view class="img_box">
			<view class="back" @click="back">
				<image src="/static/images/arrow-left.png" mode="widthFix"></image>
				<text>返回</text>
			</view>
		</view>

		<view class="main" v-if="orderDetails">
			<view class="count_down">
				<text>1分鐘後將會自動登出</text>
				<u-count-down ref="countDown" :time="countdown" format="ss"></u-count-down>
			</view>

			<view class="order_status">{{setOrderStatus(orderDetails.status)}}</view>
			<view class="order_info">
				<view class="title">預約訂單</view>
				<view class="info">
					<view class="img">
						<u-image :src="orderDetails.room_image" :lazy-load="true"></u-image>
					</view>
					<view class="room_use">
						<view class="room_name">{{orderDetails.room_name}}</view>
						<view class="store_name">{{orderDetails.store_name}}</view>
					</view>
				</view>
				<view class="order_time">
					<view class="start_time">
						<text>{{orderStartDate(orderDetails.start)}}</text>
						<text style="margin-top:10rpx;font-size:30rpx;">{{orderTime(orderDetails.start)}}</text>
					</view>
					<view class="order_duration">
						<text>時長</text>
						<text
							style="margin-top:10rpx;font-size:30rpx;">{{orderDuration(orderDetails.start,orderDetails.end)}}</text>
					</view>
					<view class="start_time">
						<text>{{orderStartDate(orderDetails.end)}}</text>
						<text style="margin-top:10rpx;font-size:30rpx;">{{orderTime(orderDetails.end)}}</text>
					</view>
				</view>

				<view class="other" v-if="showMore">
					<view class="other_item">
						<view>訂單金額</view>
						<view style="color: #FA533D;font-weight: bold;">${{orderDetails.total_price }}</view>
					</view>
					<view class="other_item">
						<view>-會員折扣</view>
						<view style="font-weight: bold;">{{ setVipRate(storeInfo.vip_rate) }}</view>
					</view>
					<view class="other_item">
						<view>-電子票卷</view>
						<view style="font-weight: bold;">選擇票卷</view>
					</view>
					<view class="other_item">
						<view>支付金額</view>
						<view style="color: #FA533D;font-weight: bold;">${{orderDetails.pay_price}}</view>
					</view>
					<view class="other_item">
						<view>訂單編號</view>
						<view style="font-weight: bold;">{{orderDetails.order_no}}</view>
					</view>
					<view class="other_item">
						<view>下單時間</view>
						<view style="font-weight: bold;">{{orderDetails.time}}</view>
					</view>
					<view class="other_item">
						<view>支付方式</view>
						<view style="font-weight: bold;">{{setPayType(orderDetails.pay_type)}}</view>
					</view>
				</view>
				<view class="more_details">
					<text>{{showMore?'收起':'更多訂單詳情請登入APP查看訂單資訊'}}</text>
					<!-- <u-icon v-if="!showMore" size="25" color="#39B19D" name="arrow-down-fill"></u-icon> -->
					<!-- <u-icon v-else size="25" color="#39B19D" name="arrow-up-fill"></u-icon> -->
				</view>
			</view>

			<view class="device_control" v-if="orderDetails.status === 33">
				<!-- <view class="device_control" v-if="orderDetails.status"> -->
				<view class="equipment_item" v-for="item in filterDeviceList(orderDetails.equipment_list)"
					:key="item.id">
					<view class="equipment_image">
						<u-image :src="baseImage(item.image)" mode="widthFix" :lazy-load="true"></u-image>
					</view>
					<view class="equipment_name">
						{{ item.type_id == 8 ? accountData(item.account_new).UserName : item.nickname}}
					</view>
					<view class="equipment_text">{{item.type_id == 8 ? '藍牙密碼' : '密碼'}}</view>
					<view class="equipment_password"
						@tap="item.type_id == 8 ?copy(accountData(item.account_new).Password) : copy(item.account)">
						{{ item.type_id == 8 ? accountData(item.account_new).Password : item.account }}
					</view>
					<view class="equipment_operate">
						<u-switch v-if="item.type_id == 9" v-model="item.is_open"
							@change="changeSwitch($event,item)"></u-switch>
						<view class="copy" v-if="item.type_id == 8" @tap="copy(accountData(item.account_new).Password)">
							複製密碼
						</view>
					</view>
				</view>
			</view>

			<!-- 下單須知 -->
			<view class="order_tips">
				<view class="title">下單須知</view>
				<view class="order_tips_item">
					<view class="">1.訂單保留15分鐘，15分鐘自動確認到店</view>
					<view class="">2.訂單最多可提前60分鐘確認到店(前面沒其他客人)</view>
					<view class="">3.如需取消，請聯繫客服人員</view>
				</view>
			</view>

			<view class="operate_box">
				<u-button v-if="orderDetails.status == 33" @click="showCheckOut = true" class="custom-style1"
					text="提前離店"></u-button>
				<u-button v-if="orderDetails.status == 30 || orderDetails.status == 33" @click="openChangeRoomPicker"
					class="custom-style1" text="更換位置"></u-button>
				<u-button v-if="orderDetails.status == 33" @click="openExtendPopup" class="custom-style1"
					text="續單"></u-button>
				<u-button v-if="orderDetails.status == 10" @click="openPaymentPopup" class="custom-style4"
					text="立即付款"></u-button>
				<u-button v-if="orderDetails.status == 10 || orderDetails.status == 30" @click="showOrderCancel = true"
					class="custom-style2" text="取消訂單"></u-button>
				<u-button v-if="orderDetails.status == 30" @click="openToStorePopup" class="custom-style3"
					text="確認到店"></u-button>
			</view>
		</view>

		<!-- 提前離店 -->
		<u-modal :show="showCheckOut" @confirm="confirmCheckOut" @cancel="showCheckOut = false"
			@close="showCheckOut = false" title="是否確認提前離店" confirmText="確認" :showCancelButton="true"
			:closeOnClickOverlay="true"></u-modal>

		<!-- 更換位置 -->
		<u-picker :show="showChangeRoom" @confirm="openChangeModal" @cancel="showChangeRoom = false"
			@close="showChangeRoom = false" :columns="changeRoomList" keyName="name"
			:closeOnClickOverlay="true"></u-picker>
		<u-modal :show="showChangeRoomModal" @confirm="confirmChangeRoom" @cancel="showChangeRoomModal = false"
			@close="showChangeRoomModal = false" title="是否確認更換包廂" confirmText="確認" :showCancelButton="true"
			:closeOnClickOverlay="true"></u-modal>

		<!-- 取消訂單 -->
		<u-modal :show="showOrderCancel" @confirm="confirmOrderCancel" @cancel="showOrderCancel = false"
			@close="showOrderCancel = false" title="是否取消訂單" confirmText="確認" :showCancelButton="true"
			:closeOnClickOverlay="true"></u-modal>

		<!-- 確認到店 -->
		<u-popup round="16" mode="center" @close="showToStorePopup=false" :closeOnClickOverlay="true"
			:show="showToStorePopup">
			<view class="con_arrival_store">
				<view class="title">訂單確認開始</view>
				<view v-if="roomStatus==2" style="text-align: center;margin: 20rpx 0;font-size: 40rpx;color: #ff914d;"
					class="">該包廂還未打掃，確認是否到店</view>
				<!-- <view class="old_time" style="color: #39B19D;">{{nowTime}}</view> -->
				<view class="game_time">
					<view class="start">
						<view class="">{{setOrderStartTime('s', 'time')}}</view>
						<view class="date">{{setOrderStartTime('s', 'date')}}</view>
					</view>
					<view class="duration">共{{setOrderStartTime('d')}}小時</view>
					<view class="start">
						<view class="">{{setOrderStartTime('e','time')}}</view>
						<view class="date">{{setOrderStartTime('e','date')}}</view>
					</view>
				</view>

				<view class="old_time">是否開始訂單？</view>
				<view class="popupbtns">
					<u-button @click="showToStorePopup = false" text="取消"></u-button>
					<u-button class="custom-style" @click="confirmStart" text="開始"></u-button>
				</view>
			</view>
		</u-popup>

		<!-- 立即支付 -->
		<u-popup round="10" :show="showPaymentPopup" @close="showPaymentPopup = false" :closeOnClickOverlay="true">
			<view class="payment_box">
				<u-radio-group @change="changePayment" v-model="radiovalue" placement="column">
					<u-radio v-for="(item,index) in paymentList" :name="item.name" :key="index" :label="item.name"
						:customStyle="{margin:'20rpx auto'}" activeColor="#39B19D" labelSize="20" size="20"
						iconSize="20"></u-radio>
				</u-radio-group>
				<view class="btns">
					<u-button @click="showPaymentPopup = false" class="custom-style1" text="取消"></u-button>
					<u-button @click="confirmPayment" class="custom-style2" text="確認"></u-button>
				</view>
			</view>
		</u-popup>

		<view class="logout" @click="logout">
			<image src="@/static/images/tuichu1.png" mode="widthFix"></image>
		</view>

		<!-- 續單 -->
		<u-popup round="10" :show="showExtendTimePopup" @close="showExtendTimePopup = false"
			:closeOnClickOverlay="true">
			<extend-time @paymentBalance="paymentBalance" :orderDetails="orderDetails"></extend-time>
		</u-popup>

	</view>
</template>

<script>
	import useStore from '@/store/index.js';
	import baseURL from '@/utils/baseURL.js';
	import {
		getOrderDetails,
		getChangeRoomList,
		advanceOrderEnd,
		exChangeRoom,
		cancelOrder,
		queryRoomStatus,
		userConfirmArraivalStore,
		equipmentChangStatus,
		getOrderCode
	} from '@/api/order.js'
	import ExtendTime from './components/ExtendTime'

	export default {
		components: {
			ExtendTime
		},
		data() {
			return {
				statusBarHeight: 0,
				order_id: null,
				orderDetails: null,
				showMore: false,
				storeInfo: {},
				showCheckOut: false,
				changeRoomList: [],
				showChangeRoom: false,
				changeRoomInfo: {},
				showChangeRoomModal: false,
				showOrderCancel: false,
				showToStorePopup: false,
				roomStatus: '',
				nowTime: '',
				showPaymentPopup: false,
				paymentList: [{
					name: '現金支付',
					disabled: false
				}, {
					name: '餘額支付',
					disabled: false
				}],
				radiovalue: '',
				countdown: 0,
				time: null,
				showExtendTimePopup: false,
			};
		},
		onLoad(options) {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.order_id = options.id
			this.storeInfo = JSON.parse(uni.getStorageSync('equipmentOptions'))
		},
		onShow() {
			this.getOrderDetailsFn()
		},
		onUnload() {
			clearTimeout(this.time)
		},
		methods: {
			getOrderDetailsFn() {
				getOrderDetails({
					order_id: this.order_id
				}).then(res => {
					this.orderDetails = res
					this.countdown = 60 * 1000
					this.time = setTimeout(() => {
						this.logout()
					}, this.countdown)
				})
			},
			back() {
				clearTimeout(this.time)
				uni.reLaunch({
					url: '/pages/order/order'
				})
			},
			setOrderStatus(status) {
				switch (status) {
					case 10:
						return '待付款';
					case 30:
						return '待使用';
					case 33:
						return '使用中';
					case 20:
						return '已取消';
					case 31:
						return '已使用';
					case 32:
						return '已過期';
					case 40:
						return '待退款';
					case 41:
						return '已退款';
				}
			},
			orderStartDate(date) {
				let a = new Date(date * 1000)
				let year = a.getFullYear()
				let month = this.montage(a.getMonth() + 1)
				let day = this.montage(a.getDate())
				let b = a.getDay()
				let c = year + '-' + month + '-' + day
				return this.setWeek(c, b)
			},
			orderTime(date) {
				let a = new Date(date * 1000)
				let h = this.montage(a.getHours())
				let m = this.montage(a.getMinutes())
				return h + ":" + m
			},
			setWeek(date, week) {
				switch (week) {
					case 0:
						return date + '週日';
					case 1:
						return date + '週一';
					case 2:
						return date + '週二';
					case 3:
						return date + '週三';
					case 4:
						return date + '週四';
					case 5:
						return date + '週五';
					case 6:
						return date + '週六';
				}
			},
			montage(num) {
				return num >= 10 ? num : '0' + num
			},
			orderDuration(start, end) {
				let a = end - start
				let h = Math.floor(a / 60 / 60)
				let m = Math.floor(a % (60 * 60) / 60)
				if (m > 0) {
					return h + '小時' + this.montage(m) + '分鐘'
				} else {
					return h + '小時'
				}
			},
			setVipRate(rate) {
				if (rate == 0 || rate == 10) {
					return 0
				} else {
					return rate + '折'
				}
			},
			setPayType(type) {
				switch (type) {
					case 1:
						return '信用卡/轉賬 藍新';
					case 2:
						return '信用卡/轉賬 緑界';
					case 5:
						return '現金支付';
					case 6:
						return '餘額支付';
					case 7:
						return '儲值卡支付';
				}
			},
			baseImage(url) {
				return baseURL + url
			},
			accountData(data) {
				if (!data) return {}
				return JSON.parse(data)
			},
			copy(str) {
				uni.setClipboardData({
					data: str, // 複製內容
					success: () => {
						uni.showToast({
							title: '複製成功'
						})
					}
				})
			},
			changeSwitch(event, item) {
				equipmentChangStatus({
					room_id: this.orderDetails.room_id,
					equipmentID: item.equipmentID,
					is_open: event ? 1 : 0
				}).then(res => {
					// console.log(res)
				})
			},
			filterDeviceList(arr) {
				let list = arr.filter(item => {
					if (item.type_id == 8 || item.type_id == 9) {
						return item
					}
				})
				return list
			},
			confirmCheckOut() {
				advanceOrderEnd({
					order_id: this.orderDetails.id
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: '操作成功',
							icon: 'success'
						})
					}
					this.showCheckOut = false
					return res
				}).then(res => {
					if (res.code == 0) return
					this.getOrderDetailsFn()
				})
			},
			openChangeRoomPicker() {
				getChangeRoomList({
					order_id: this.orderDetails.id
				}).then(res => {
					if (!res.length) {
						uni.showToast({
							title: '暫無可更換的包廂',
							icon: 'none'
						})
					} else {
						this.changeRoomList = [
							[...res]
						]
						this.showChangeRoom = true
					}
				})
			},
			openChangeModal(e) {
				// console.log(e.value[0], '更換位置')
				this.changeRoomInfo = e.value[0]
				this.showChangeRoom = false
				this.showChangeRoomModal = true
			},
			confirmChangeRoom() {
				const params = {
					order_id: this.orderDetails.id,
					room_id: this.changeRoomInfo.id
				}
				exChangeRoom(params).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: '包廂更換成功',
							icon: 'success'
						})
					}
					this.showChangeRoomModal = false
					return res
				}).then(res => {
					if (res.code == 0) return
					this.getOrderDetailsFn()
				})
			},
			confirmOrderCancel() {
				cancelOrder({
					order_id: this.orderDetails.id
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: '訂單已取消',
							icon: 'success'
						})
					}
					this.showOrderCancel = false
					return res
				}).then(res => {
					if (res.code == 0) return
					this.getOrderDetailsFn()
				})
			},
			openToStorePopup() {
				queryRoomStatus({
					room_id: this.orderDetails.room_id
				}).then(res => {
					this.roomStatus = res[0]
					this.showToStorePopup = true
				})
				this.arrivalStoreTime()
			},
			arrivalStoreTime() {
				let a = new Date()
				// 訂單結束時間
				let orderStart = this.orderDetails.start * 1000
				let nowStamp = a.getTime()
				let y = a.getFullYear()
				let m = this.montage(a.getMonth() + 1)
				let d = this.montage(a.getDate())
				let h = this.montage(a.getHours())
				let min = this.montage(a.getMinutes())
				let w = a.getDay()
				let day = y + '-' + m + '-' + d

				if (nowStamp >= orderStart) {
					let orderEnd = new Date(this.orderDetails.end * 1000)
					let endY = orderEnd.getFullYear()
					let endM = this.montage(orderEnd.getMonth() + 1)
					let endD = this.montage(orderEnd.getDate())
					let endH = this.montage(orderEnd.getHours())
					let endMin = this.montage(orderEnd.getMinutes())
					let endW = orderEnd.getDay()
					let endDay = endY + '-' + endM + '-' + endD
					this.nowTime = this.setWeek(day, w) + " " + h + ":" + min + " — " +
						this.setWeek(endDay, endW) + " " + endH + ':' + endMin
					return
				}
				let duration = this.orderDuration(this.orderDetails.start, this.orderDetails.end)
				let minFlag = duration.indexOf('分鐘')
				if (minFlag == -1) {
					let c = Number(duration.split('小時')[0]) * 60 * 60 * 1000
					let end = new Date(a.getTime() + c)
					let endY = end.getFullYear()
					let endM = this.montage(end.getMonth() + 1)
					let endD = this.montage(end.getDate())
					let endH = this.montage(end.getHours())
					let endMin = this.montage(end.getMinutes())
					let endW = end.getDay()
					let endDay = endY + '-' + endM + '-' + endD
					this.nowTime = this.setWeek(day, w) + " " + h + ":" + min + " — " +
						this.setWeek(endDay, endW) + " " + endH + ':' + endMin
				} else {
					let hour = Number(duration.split('小時')[0])
					let minute = Number(duration.split('小時')[1].split('分鐘')[0])
					let c = hour * 60 * 60 * 1000 + minute * 60 * 1000
					let end = new Date(a.getTime() + c)
					let endY = end.getFullYear()
					let endM = this.montage(end.getMonth() + 1)
					let endD = this.montage(end.getDate())
					let endH = this.montage(end.getHours())
					let endMin = this.montage(end.getMinutes())
					let endW = end.getDay()
					let endDay = endY + '-' + endM + '-' + endD
					this.nowTime = this.setWeek(day, w) + " " + h + ":" + min + " — " +
						this.setWeek(endDay, endW) + " " + endH + ':' + endMin
				}
			},
			confirmStart() {
				userConfirmArraivalStore({
					order_id: this.orderDetails.id
				}).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: '到店成功',
							icon: 'success'
						})
					}
					this.showToStorePopup = false
					return res
				}).then(res => {
					if (res.code == 0) return
					this.getOrderDetailsFn()
				})
			},
			openPaymentPopup() {
				this.showPaymentPopup = true
				this.radiovalue = this.paymentList[0].name
			},
			changePayment(e) {
				this.radiovalue = e
			},
			confirmPayment() {
				if (this.radiovalue == '餘額支付') {
					const params = {
						room_id: this.orderDetails.room_id,
						pay_type: 6,
						money: this.orderDetails.total_price,
						date: this.setDate(this.orderDetails.date),
						timeslot: this.orderDetails.timeslot,
					}
					getOrderCode(params).then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: '支付成功',
								icon: 'success',
								duration: 2000
							})
						}
						this.showPaymentPopup = false
						return res
					}).then(res => {
						if (res.code == 0) return
						this.getOrderDetailsFn()
					})
				} else {
					const {
						order
					} = useStore()
					// const params = Object.assign({
					// 	money: order.getOrderObj.money
					// })
					order.setOrderObjState({
						money: this.orderDetails.total_price
					})
					this.showPaymentPopup = false

					clearTimeout(this.time)

					uni.navigateTo({
						url: `/pages/pay/slotMachines/slotMachines?orderNo=${this.orderDetails.order_no}`
					})
				}
			},
			setDate(date) {
				let time = new Date(date * 1000)
				let y = time.getFullYear()
				let m = time.getMonth() + 1
				let d = time.getDate()
				return `${y}-${m}-${d}`
			},
			logout() {
				clearTimeout(this.time)
				uni.removeStorageSync('userOptions')
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			openExtendPopup() {
				clearTimeout(this.time)
				this.countdown = 60 * 1000
				this.$refs.countDown.pause();
				this.showExtendTimePopup = true
				const {
					user
				} = useStore();
				user.setTicketState({
					id: this.orderDetails.room_id
				})
			},
			paymentBalance() {
				this.showExtendTimePopup = false
				this.$refs.countDown.reset()
				this.countdown = 60 * 1000
				this.time = setTimeout(() => {
					this.logout()
				}, this.countdown)
				this.getOrderDetailsFn()
			},
			setOrderStartTime(soe, type) {
				const start = new Date(this.orderDetails.start * 1000)
				const end = new Date(this.orderDetails.end * 1000)
				const duration = Math.floor((this.orderDetails.end - this.orderDetails.start) / 60 / 60)
				const sY = start.getFullYear()
				const sM = start.getMonth() + 1 < 10 ? '0' + (start.getMonth() + 1) : start.getMonth() + 1
				const sD = start.getDate() < 10 ? '0' + start.getDate() : start.getDate()
				const sH = start.getHours() < 10 ? '0' + start.getHours() : start.getHours()
				const sMin = start.getMinutes() < 10 ? '0' + start.getMinutes() : start.getMinutes()
				const eY = end.getFullYear()
				const eM = end.getMonth() + 1 < 10 ? '0' + (end.getMonth() + 1) : end.getMonth() + 1
				const eD = end.getDate() < 10 ? '0' + end.getDate() : end.getDate()
				const eH = end.getHours() < 10 ? '0' + end.getHours() : end.getHours()
				const eMin = end.getMinutes() < 10 ? '0' + end.getMinutes() : end.getMinutes()
				if (soe == 's') {
					return type == 'date' ? sY + '-' + sM + '-' + sD : sH + ':' + sMin
				} else if (soe == 'e') {
					return type == 'date' ? eY + '-' + eM + '-' + eD : eH + ':' + eMin
				} else {
					return duration
				}
			},
		},
		watch: {
			showExtendTimePopup(n) {
				if (!n) {
					clearTimeout(this.time)
					this.$refs.countDown.reset()
					this.countdown = 60 * 1000
					this.time = setTimeout(() => {
						this.logout()
					}, this.countdown)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F3F5F9;
		height: 100vh;
		padding-bottom: 100rpx;
		box-sizing: border-box;

		position: relative;

		.img_box {
			position: relative;
			height: 70rpx;
			background-color: #39B19D;
			// margin-bottom: 20rpx;

			.back {
				position: fixed;
				left: 10rpx;
				bottom: 120rpx;
				display: flex;
				align-items: center;
				color: #fff;
				background-color: #ff914d;
				padding: 5rpx 10rpx;
				border-radius: 20rpx;
				z-index: 11;

				image {
					width: 50rpx;
					margin-right: 10rpx;
				}
			}
		}

		.main {
			padding: 20rpx 30rpx;
			box-sizing: border-box;

			.count_down {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 36rpx;
				font-weight: 600;
				margin-bottom: 20rpx;
				background-color: #ff914d;
				padding: 10rpx 20rpx;
				border-radius: 10rpx;
				box-sizing: border-box;

				::v-deep .u-count-down__text {
					font-weight: 600;
					font-size: 36rpx;
					color: #fff;
				}
			}

			.order_status {
				background-color: #fff;
				padding: 10rpx 20rpx;
				box-sizing: border-box;
				border-radius: 10rpx;
				color: #39B19D;
				font-size: 36rpx;
				font-weight: 600;
				margin-bottom: 20rpx;
			}

			.order_info {
				padding: 20rpx;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 10rpx;

				.title {
					font-size: 28rpx;
					margin-bottom: 15rpx;
					font-weight: bold;
					display: flex;
					align-items: center;

					&::before {
						content: '';
						display: inline-block;
						width: 6rpx;
						height: 38rpx;
						background: #39B19D;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						opacity: 1;
						margin-right: 7rpx;
					}
				}

				.info {
					display: flex;
					margin-bottom: 20rpx;

					.img {
						width: 140rpx;
						height: 110rpx;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						opacity: 1;
						margin-right: 18rpx;

						::v-deep .u-image {
							width: 140rpx !important;
							height: 110rpx !important;
							border-radius: 16rpx !important;
						}

						::v-deep .u-image__image {
							width: 100% !important;
							height: 100% !important;
							border-radius: 16rpx !important;
						}

						::v-deep .u-image__error {
							width: 100% !important;
							height: 100% !important;
							border-radius: 16rpx !important;
						}

						::v-deep .u-image__loading {
							width: 100% !important;
							height: 100% !important;
							border-radius: 16rpx !important;
						}
					}

					.room_use {
						.room_name {
							font-size: 30rpx;
							margin: 4rpx 0 16rpx;
							font-weight: bold;
						}

						.store_name {
							font-size: 30rpx;
						}

						.time {
							display: flex;

							.time_box {
								text-align: center;

								&:nth-child(2) {
									margin: 0 10rpx;
								}

								view {
									color: #999;
									font-size: 20rpx;

									&:last-child {
										font-size: 24rpx;
										color: #000;
										margin-top: 10rpx;
									}
								}
							}
						}
					}
				}

				.order_time {
					width: 650rpx;
					height: 89rpx;
					background: #F0FDF8;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					opacity: 1;
					margin: 0 auto 39rpx;
					display: flex;
					align-items: center;
					justify-content: space-around;

					.start_time,
					.order_duration {
						font-size: 28rpx;
						color: #39B19D;
						display: flex;
						flex-direction: column;
						align-items: center;
					}
				}

				.other {
					.other_item {
						display: flex;
						justify-content: space-between;
						margin-bottom: 16rpx;

						view {
							font-size: 34rpx;
						}
					}
				}

				.more_details {
					margin: 10rpx 30rpx;
					background-color: #39b19d61;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 60rpx;
					font-weight: 600;
					border-radius: 60rpx;
					color: #000;
				}
			}

			.device_control {
				width: 690rpx;
				min-height: 177rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
				margin: 35rpx 0 30rpx;
				padding: 11rpx 17rpx 30rpx;
				box-sizing: border-box;
				margin: 0 auto;

				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.title {
					font-size: 28rpx;
					font-weight: bold;
					color: #000;
					display: flex;
					align-items: center;
					margin-bottom: 23rpx;

					&:before {
						content: "";
						width: 6rpx;
						height: 38rpx;
						background: #39B19D;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						opacity: 1;
						margin-right: 7rpx;
					}
				}

				.device_list {
					.device_item {
						// width: 659rpx;
						height: 77rpx;
						background: #F0FDF8;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						opacity: 1;
						padding: 0 20rpx;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 20rpx;

						.left {
							display: flex;
							align-items: center;

							.img {
								margin-right: 10rpx;

								image {
									width: 40rpx;
								}

								::v-deep .u-image {
									width: 40rpx !important;
									height: 40rpx !important;
								}

								::v-deep .u-image__image {
									width: 40rpx !important;
									height: 40rpx !important;
								}

								::v-deep .u-image__error {
									width: 40rpx !important;
									height: 40rpx !important;
								}

								::v-deep .u-image__loading {
									width: 40rpx !important;
									height: 40rpx !important;
								}
							}

							.info {
								display: flex;
								flex-direction: column;

								.name {
									font-size: 30rpx;
									font-weight: bold;
									color: #000;
								}

								.password {
									font-size: 26rpx;
									color: #999;
								}
							}
						}

						.right {
							display: flex;
							align-items: center;

							.copy {
								width: 115rpx;
								height: 38rpx;
								border-radius: 19rpx 19rpx 19rpx 19rpx;
								opacity: 1;
								border: 1rpx solid #707070;
								font-size: 18rpx;
								text-align: center;
								line-height: 38rpx;
								margin-right: 15rpx;
							}

							.connect {
								width: 115rpx;
								height: 38rpx;
								background: #39B19D;
								border-radius: 19rpx 19rpx 19rpx 19rpx;
								opacity: 1;
								font-size: 18rpx;
								text-align: center;
								line-height: 38rpx;
								color: #fff;
							}
						}
					}
				}

				.equipment_box {
					display: flex;
					width: 49%;
				}

				.equipment_item {
					width: 49%;
					// height: 100rpx;
					padding: 10rpx;
					border: 1rpx solid #39B19D;
					border-radius: 20rpx;
					background-color: #39b19d61;
					box-sizing: border-box;
					margin-bottom: 10rpx;

					.equipment_image {
						display: flex;
						justify-content: center;

						::v-deep .u-image {
							width: 50rpx !important;
							height: 50rpx !important;
						}

						::v-deep .u-image__image {
							width: 50rpx !important;
							height: 50rpx !important;
						}

						::v-deep .u-image__loading {
							width: 50rpx !important;
							height: 50rpx !important;
						}

						::v-deep .u-image__error {
							width: 50rpx !important;
							height: 50rpx !important;
						}
					}

					.equipment_name {
						text-align: center;
						font-size: 36rpx;
					}

					.equipment_text {
						color: #ff914d;
						text-align: center;
					}

					.equipment_password {
						color: #ff914d;
						text-align: center;
						font-size: 34rpx;
						font-weight: 600;
					}

					.equipment_operate {
						margin-top: 10rpx;
						display: flex;
						justify-content: center;

						.copy {
							width: 115rpx;
							height: 38rpx;
							border-radius: 19rpx 19rpx 19rpx 19rpx;
							opacity: 1;
							border: 1rpx solid #707070;
							font-size: 18rpx;
							text-align: center;
							line-height: 38rpx;
							margin-right: 15rpx;
						}
					}
				}
			}

			.order_tips {
				// width: 690rpx;
				// height: 144rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
				padding: 11rpx 17rpx 30rpx;
				box-sizing: border-box;
				margin-bottom: 36rpx;
				// margin: 30rpx;
				margin-top: 30rpx;


				.title {
					font-size: 30rpx;
					font-weight: bold;
					color: #000;
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					&:before {
						content: "";
						width: 6rpx;
						height: 38rpx;
						background: #39B19D;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						opacity: 1;
						margin-right: 7rpx;
					}
				}

				.order_tips_item {
					font-size: 28rpx;
					margin-left: 33rpx;
				}
			}

			.operate_box {
				display: flex;
				justify-content: flex-end;

				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: #fff;
				padding: 30rpx 0;

				.custom-style1,
				.custom-style2,
				.custom-style3,
				.custom-style4 {
					margin: 0;
					height: 70rpx;
					width: 200rpx;
					font-size: 40rpx;
					border-radius: 70rpx;
					border: 1rpx solid #39B19D;
					color: #39B19D;
					margin-left: 20rpx;

					::v-deep .u-button__text {
						font-size: 32rpx !important;
					}
				}

				.custom-style3 {
					background-color: #39B19D;
					color: #fff;
					border-color: #39B19D;
				}

				.custom-style4 {
					background-color: #ff914d;
					border-color: #ff914d;
					color: #fff;
				}
			}
		}

		.con_arrival_store {
			width: 624rpx;
			min-height: 441rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			padding: 35rpx 20rpx;
			box-sizing: border-box;

			.title {
				font-size: 30rpx;
				font-weight: bold;
				color: #000;
				margin-bottom: 10rpx;
				text-align: center;
			}

			.old_time {
				text-align: center;
				font-size: 28rpx;
				color: #999;
				margin-bottom: 10rpx;
			}

			.game_time {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 80%;
				border-radius: 10rpx;
				background-color: #ccc;
				padding: 10rpx;
				margin: 10rpx auto;

				.start {
					font-size: 60rpx;
					text-align: center;

					.date {
						font-size: 26rpx;
					}
				}

				.duration {
					font-size: 28rpx;
					margin: 0 20rpx;
					// text-decoration: underline dotted;
					border-bottom: 1rpx dotted #000;
					padding-bottom: 10rpx;
				}
			}

			.popupbtns {
				width: 543rpx;
				display: flex;
				position: absolute;
				bottom: 20rpx;

				.custom-style {
					background-color: #39B19D;
					color: #fff;
				}
			}

			.early_start {
				height: 82rpx;
				background: #39B19D;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
				color: #fff;
				font-size: 30rpx;
				text-align: center;
				line-height: 82rpx;
				margin-top: 10rpx;
				// position: absolute;
				// bottom: 20rpx;
			}
		}

		.payment_box {
			padding: 30rpx;

			.btns {
				display: flex;
				justify-content: space-around;
				margin: 30rpx 0;

				.custom-style1,
				.custom-style2 {
					margin: 0;
					width: 200rpx;
					height: 70rpx;
					font-size: 28rpx;
					background-color: #fff;
					color: #000;
					border: 1rpx solid #999;
				}

				.custom-style2 {
					background-color: #ff914d;
					color: #fff;
					border-color: #ff914d;
				}
			}
		}

		.logout {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #ff914d;

			position: absolute;
			bottom: 100rpx;
			right: 30rpx;

			image {
				width: 50rpx;
			}
		}
	}
</style>